<template>
	<div style="padding: 20px;">
		<div style="padding: 20px 0;"><el-button size="small" type="primary" @click="handleDownload">导出EXCEl</el-button>
        <button @click="bbb"> 222</button></div>
		<el-table class="center-table" :data="tableData" size="small">
			<el-table-column prop="date" label="日期" width="150" />
			<el-table-column label="配送信息">
				<el-table-column prop="name" label="姓名" width="120" />
				<el-table-column label="地址">
					<el-table-column prop="province" label="省份" width="120" />
					<el-table-column prop="city" label="市区" width="120" />
					<el-table-column prop="address" label="地址" />
					<el-table-column prop="zip" label="邮编" width="120" />
				</el-table-column>
			</el-table-column>
		</el-table>
	</div>
</template>
 
<script>
import {tableData1} from '@/utils/data'
export default {
	name: 'MergeHeader',
    // components:{tableData1},
	data() {
		return {
            tableData1:tableData1,
            tableData: [
				{
					date: '2016-05-03',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				},
				{
					date: '2016-05-02',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				},
				{
					date: '2016-05-04',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				},
				{
					date: '2016-05-01',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				},
				{
					date: '2016-05-08',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				},
				{
					date: '2016-05-06',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				},
				{
					date: '2016-05-07',
					name: '王小虎',
					province: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				}
			],
     capital:[],
    arry:[['人员姓名', '项目名称'],['',''],[1,2],['2023-11',''],[],],
   project:[
    {
        "projectId": 39,
        "projectName": "内窥镜项目",
        "projectCode": "31103",
        "projectManager": 129,
        "projectManagerName": "花项理",
        "projectStatus": "a",
        "manHour": 440,
        "useHour": 40,
        "fillStatus": 2,
        "dayHour": 0
    },
    {
        "projectId": 41,
        "projectName": "电刀项目",
        "projectCode": "monday",
        "projectManager": 127,
        "projectManagerName": "张项理",
        "projectStatus": "a",
        "manHour": 264,
        "useHour": 12,
        "fillStatus": 2,
        "dayHour": 0
    },
    {
        "projectId": 44,
        "projectName": "超乳项目",
        "projectCode": "suzhou",
        "projectManager": 129,
        "projectManagerName": "花项理",
        "projectStatus": "a",
        "manHour": 264,
        "useHour": 14.5,
        "fillStatus": 2,
        "dayHour": 0
    }
],
datavlue:{},
all:{
    '小张':[
    {
        "projectId": 39,
        "projectName": "内窥镜项目",
        "projectCode": "31103",
        "projectManager": 129,
        "projectManagerName": "花项理",
        "projectStatus": "a",
        "manHour": 440,
        "useHour": 40,
        "fillStatus": 2,
        "dayHour": 0
    },
    {
        "projectId": 41,
        "projectName": "电刀项目",
        "projectCode": "monday",
        "projectManager": 127,
        "projectManagerName": "张项理",
        "projectStatus": "a",
        "manHour": 264,
        "useHour": 12,
        "fillStatus": 2,
        "dayHour": 0
    },
    {
        "projectId": 44,
        "projectName": "超乳项目",
        "projectCode": "suzhou",
        "projectManager": 129,
        "projectManagerName": "花项理",
        "projectStatus": "a",
        "manHour": 264,
        "useHour": 14.5,
        "fillStatus": 2,
        "dayHour": 0
    }
],
'小王':[
    {
        "projectId": 39,
        "projectName": "内窥镜项目",
        "projectCode": "31103",
        "projectManager": 129,
        "projectManagerName": "花项理",
        "projectStatus": "a",
        "manHour": 440,
        "useHour": 40,
        "fillStatus": 2,
        "dayHour": 0
    },
    {
        "projectId": 41,
        "projectName": "电刀项目",
        "projectCode": "monday",
        "projectManager": 127,
        "projectManagerName": "张项理",
        "projectStatus": "a",
        "manHour": 264,
        "useHour": 12,
        "fillStatus": 2,
        "dayHour": 0
    },
    {
        "projectId": 44,
        "projectName": "超乳项目",
        "projectCode": "suzhou",
        "projectManager": 129,
        "projectManagerName": "花项理",
        "projectStatus": "a",
        "manHour": 264,
        "useHour": 14.5,
        "fillStatus": 2,
        "dayHour": 0
    },
{
        "projectId": 44,
        "projectName": "剪刀手项目",
        "projectCode": "suzhou",
        "projectManager": 129,
        "projectManagerName": "花项理",
        "projectStatus": "a",
        "manHour": 264,
        "useHour": 14.5,
        "fillStatus": 2,
        "dayHour": 0
    }
]},
myneed:{}
		};
	},
 
	methods: {
bbb(){
for (let i = 0; i < 26; i++) {
    // 输出A-Z 26个大写字母
    this.capital.push(String.fromCharCode(65 + i)) 
}
console.log(this.capital);
let aa = {},bb=[]
this.project.forEach(e=> {
        aa[e.projectName]=['小张',e.projectName]
        // aa.value=['xiaozhang',e.projectName]
            });
            for (const key in this.all) {
                this.myneed[key]={}
               this.all[key].forEach(e => {
                this.myneed[key][e.projectName]=[key,e.projectName]
                
               });
            }
            console.log(this.myneed);
this.tableData1.forEach((el,index) => {
               this.arry[0].push(el.date.slice(-5),el.date.slice(-5))
               this.arry[1].push('工作时长','工作内容')
                this.arry[2].push('时长','内容')
                this.arry[3].push('','')
                for (const key in this.myneed['小张']) {
                this.myneed['小张'][key].push('','')
                }
                for (const key in this.myneed['小王']) {
                this.myneed['小王'][key].push('','')
                }
                console.log(el,aa,index);
                
                if (el.projectHours) {
                    el.projectHours.forEach(fl => {
                        if (this.myneed['小张'][fl.projectName]) {
                            this.myneed['小张'][fl.projectName][index*2+2]=fl.useHour+'小时'
                             this.myneed['小张'][fl.projectName][index*2+3]=fl.daily
                        }
                        if (this.myneed['小王'][fl.projectName]) {
                            this.myneed['小王'][fl.projectName][index*2+2]=fl.useHour+'小时'
                             this.myneed['小王'][fl.projectName][index*2+3]=fl.daily
                        }
                    });
                }
            });
            console.log(this.myneed,this.arry);
            this.datavlue = aa
            
},

		handleDownload() {
            console.log(this.tableData1);
            let arr = this.arry
            
            
            // 处理表格列
            for (let index = 0; index < 65; index++) {
                if (index<26) {
                    arr[4].push(this.capital[index])
                 }
                 if (25<index&&index<52) {
                    arr[4].push('A'+this.capital[index-26])  
                 }
                 if (index>53) {
                        arr[4].push('B'+this.capital[index-54])
                    }
            }
            
            console.log(arr[4]);
			import('@/utils/Export2Excel').then(excel => {
				const multiHeader = [arr[0]]; // 前两行的表头数据，二维数组，不够的用空白补全
				const header = arr[1]; // 最后一行的表头数据
				// const filterVal = ['date', 'name', 'province', 'city', 'address', 'zip'];
				const list = this.tableData;
				const data = Object.values(this.myneed['小张']).concat(Object.values(this.myneed['小王']));
                // [{nickName:'yongh',projectName:'222',useHour:333,daily:44,useHour:333,daily:44,}]
                const merges = ['A2:A3', 'B2:B3', 'C2:D2','E2:F2','G2:H2','I2:J2', 'K2:L2','M2:N2','O2:P2', 'Q2:R2','S2:T2','U2:V2', 'W2:X2','Y2:Z2','AA2:AB2','AC2:AD2','AE2:AF2','AG2:AH2','AI2:AJ2', 'AK2:AL2','AM2:AN2','AO2:AP2', 'AQ2:AR2','AS2:AT2','AU2:AV2', 'AW2:AX2','AY2:AZ2','BA2:BB2','BC2:BD2','BE2:BF2','BG2:BH2','BI2:BJ2','BK2:BL2']// 合并单元格的数据
                // const multiHeader = [
				// 	['日期', '配送信息', '', '', '', ''], //第一行
				// 	['', '姓名', '地址', '', '', ''] //第二行
				// ]; // 前两行的表头数据，二维数组，不够的用空白补全
				// const header = ['', '', '省份', '市区', '地址', '邮编']; // 最后一行的表头数据
				// const filterVal = ['date', 'name', 'province', 'city', 'address', 'zip'];
				// const list = this.tableData;
				// const data = this.formatJson(filterVal, list);
                // const merges = ['A1:A3', 'B1:F1', 'B2:B3', 'C2:F2']; 
                const title = arr[3]
               const tableStyle=arr[4]
				console.log(data);
				excel.export_json_to_excel({
					multiHeader,
					header,
					merges,
					data,
                    title,
                    tableStyle
				});
			});
		},
		formatJson(filterVal, jsonData) {
			return jsonData.map(v =>
				filterVal.map(j => {
					return v[j];
				})
			);
		}
	}
};
</script>
<style>
.center-table td,
.center-table th {
	text-align: center;
    display: flex;
}
</style>